<template>
  <div class="add">
    <a-modal v-model:visible="visible" title="创建资产目录" @ok="onOk" :destroyOnClose="true">
      <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
        <a-form-item label="目录名称" v-bind="validateInfos.catalogName">
          <a-input v-model:value="form.state.catalogName" placeholder="请输入" :maxlength="20" />
        </a-form-item>
        <a-form-item label="订阅组" v-bind="validateInfos.dtsSSCId">
          <a-select v-model:value="form.state.dtsSSCId" placeholder="订阅组">
            <a-select-option v-for="item in applyList" :value="item.appId" :key="item.appId">{{ item.cname }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="目录地址" v-bind="validateInfos.catalogUrl">
          <a-textarea v-model:value="form.state.catalogUrl" placeholder="请输入" :auto-size="{ minRows: 2, maxRows: 5 }" :maxlength="200" />
        </a-form-item>
        <a-form-item label="目录类型" v-bind="validateInfos.contentType">
          <a-select v-model:value="form.state.contentType" allowClear :options="CatalogTypeList" style="width: 200px" placeholder="请选择" />
        </a-form-item>
        <a-form-item label="扩展信息" v-bind="validateInfos.extendedInfo">
          <a-textarea v-model:value="form.state.extendedInfo" placeholder="请输入" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { Form, message } from 'ant-design-vue'
  import { computed, reactive, ref, watch } from 'vue'

  import { requestAddSpaceCatalog } from '/@/api/business/space'
  import { getApplyByPageEnum } from '/@/api/manage/openApiApp'
  import { HttpCodeEnum } from '/@/enums/httpEnum'
  import { CatalogTypeList } from '/@/enums/spaceEnum'

  const props = defineProps({
    visible: { type: Boolean, default: false },
  })

  const emits = defineEmits(['update:visible', 'success'])
  const visible = computed({
    get: () => props.visible,
    set: (val: boolean) => emits('update:visible', val),
  })

  const applyList = ref<any[]>([])
  /**
   * 获取订阅组列表
   */
  const queryRecordList = () => {
    return getApplyByPageEnum({ pageSize: 30, pageIndex: 1 }).then((res) => {
      applyList.value = res?.responseData.records || []
    })
  }

  watch(
    () => visible.value,
    (newVal, oldVal) => {
      if (newVal && !oldVal) {
        initData()
        queryRecordList()
      }
    },
  )
  const initData = () => {
    resetFields()
  }

  /** 表单配置 */
  const form = reactive({
    state: {
      catalogName: '',
      dtsSSCId: null,
      contentType: null,
      catalogUrl: '',
      extendedInfo: '',
    },
    appName: computed(() => applyList.value.find((item) => item.appId === form.state.dtsSSCId)?.cname),
    rule: {
      catalogName: [{ required: true, message: '请输入目录名称' }],
      dtsSSCId: [{ required: true, message: '请选择订阅组' }],
      contentType: [{ required: true, message: '请选择资产类型' }],
      catalogUrl: [{ required: true, message: '请输入目录地址' }],
    },
    searchSuccess: false,
    onUserPhoneSearch: () => validate('userPhone'),
  })

  /** 表单hook */
  const { validate, validateInfos, resetFields } = Form.useForm(form.state, form.rule)

  /**
   * 确定
   */
  const onOk = () => {
    validate()
      .then(async () => {
        const { responseCode } = await requestAddSpaceCatalog({ ...form.state, appName: form.appName })
        if (responseCode === HttpCodeEnum.SUCCESS) {
          message.success('添加成功')
          visible.value = false
          emits('success')
        }
      })
      .catch(() => {})
  }
</script>

<style lang="less" scoped>
  .logo {
    position: absolute;
    top: 0;
    cursor: pointer;
  }
</style>
